<template>
  <div>
    <!-- 1：头部 -->
    <!-- 4-2：固定头部 -->
    <div>
      <van-nav-bar title="城市列表" left-arrow :fixed="true" />
    </div>
    <!-- 2：城市列表栏 -->
    <div class="buttom">
      <!-- 3:遍历这个对象 -->
      <van-index-bar :index-list="indexList">
        <!-- 3-1:完成索引的关联 -->
        <div v-for="(item, key) in allObj" :key="key">
          <van-index-anchor :index="key">
            <!-- 3-2 判断标题，分为三个-->
            <span v-if="key === '#'" style="color: #777">当前城市</span>
            <span v-else-if="key === '热'" style="color: #777">热门城市</span>
            <span v-else>{{ key }}</span>
          </van-index-anchor>
          <!-- 3-3：遍历里面的数组。把数据渲染到页面 -->
          <van-cell
            @click="onClick(item1)"
            :title="item1.label"
            v-for="(item1, index) in item"
            :key="index"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { hotCity, cityList } from '@/api/city'
export default {
  name: 'city-page',
  async created() {
    // 1：在created里面拿到数据
    const { data } = await hotCity()
    console.log(data.body) // 拿到热门城市的数据，处理成数组放到一个对象里
    const { data: res2 } = await cityList({ level: 1 })
    console.log(res2)
    // 1-2:把数据都放到一个对象里面 开始没有#先写死
    // 4-5:这样有数据就拿本地的，无数据就渲染默认的
    const allObj = {
      '#': [
        JSON.parse(window.localStorage.getItem('city')) || {
          label: '上海',
          value: 'AREA|dbf46d32-7e76-1196',
          pinyin: 'shanghai',
          short: 'sh'
        }
      ],
      热: data.body,
      A: [],
      B: [],
      C: [],
      D: [],
      E: [],
      F: [],
      G: [],
      H: [],
      I: [],
      J: [],
      K: [],
      L: [],
      M: [],
      N: [],
      O: [],
      P: [],
      Q: [],
      R: [],
      S: [],
      T: [],
      U: [],
      V: [],
      W: [],
      X: [],
      Y: [],
      Z: []
    }
    // 1-3:遍历城市列表 把第一个字母改成大写给到key item是每个城市的对象
    res2.body.forEach((item) => {
      const key = item.short[0].toUpperCase()
      // 再把每一个对象放到上面写的obj里面
      allObj[key].push(item)
    })
    // 去掉空的数组项
    // delete 一个对象的键名，则对象里面这一项就删掉
    for (const key in allObj) {
      if (allObj[key].length === 0) {
        delete allObj[key]
      }
    }
    // console.log(allObj)//拿到没有空数组的项
    // 把这个数据给到data
    this.allObj = allObj
    // console.log(allObj)开始遍历  把删除后的索引给到data
    this.indexList = Object.keys(allObj)
  },
  data() {
    return {
      indexList: [],
      hotList: [],
      allObj: {}
    }
  },
  methods: {
    // 4-4:给文本添加点击事件，跳转到页面 key是传进来的每个数组item
    onClick(key) {
      window.localStorage.setItem('city', JSON.stringify(key))
      // 4-5：跳转回页面
      this.$router.push('/index')
    }
  }
}
</script>

<style scoped lang="less">
// 4-1:索引给间距
::v-deep .van-index-bar__index {
  margin: 6px 0;
}
// 4-3:给城市列表固定在下面的位置
// overflow: auto;加滚动条
.buttom {
  position: fixed;
  top: 45px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
</style>
